<template>
    <el-dialog v-model="visible" title="活塞运动设置" width="30%" draggable>
        <div>
            <el-row>
                <label for="selrotategraphbtnID" style="padding-right:10px;position: relative; left:10px">运动对象</label>
                <el-button id="selrotategraphbtnID" type="primary" @click="onSelPistonGraphs">
                    图中选择
                </el-button>
            </el-row>
            
            <el-row>
                <label for="BasePointInputID" style="padding-right:10px;position: relative; left:10px">运动对象基点坐标</label>
                <el-button type="primary" @click="onSelPointOnMap('base')">图中选择</el-button>
                <el-input v-model="basePoint" autofocus size="mini"  id="BasePointInputID"></el-input>
            </el-row>

            <el-row>
                <label for="StPointInputID" style="padding-right:10px;position: relative; left:10px">运动路径起点坐标</label>
                <el-button type="primary" @click="onSelPointOnMap('st')">图中选择</el-button>
                <el-input v-model="stPoint" autofocus size="mini"  id="StPointInputID"></el-input>
            </el-row>

            <el-row>
                <label for="EndPointInputID" style="padding-right:10px;position: relative; left:10px">运动路径终点坐标</label>
                <el-button type="primary" @click="onSelPointOnMap('end')">图中选择</el-button>
                <el-input v-model="endPoint" autofocus size="mini"  id="EndPointInputID"></el-input>
            </el-row>

            <!-- <el-row>
                <label for="MotionDirID" style="padding-right:10px;position: relative; left:10px">运动方向（向量）</label>
                <el-button type="primary" @click="onSelPointOnMap('dir')">图中选择两点确定方向</el-button>
                <el-input v-model="motionDir" autofocus size="mini"  id="MotionDirID"></el-input>
            </el-row> -->
            
            <el-row>
                <label for="speedInputID" style="padding-right:10px;position: relative; left:10px">运动速度(百分比/每秒)</label>
                <el-input v-model="speed" autofocus size="mini"  id="speedInputID"></el-input>
            </el-row>

        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">Cancel</el-button>
                <el-button type="primary" @click="onConfirm">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
        
<script  setup>
import { ref, onMounted } from 'vue'
import {LGXEnums}  from '../../script/canvas/common/sysenum'
const visible = ref(false)
const speed = ref(20)
const destList = ref([])
const basePoint = ref('0,0')
const stPoint = ref('0,0')
const endPoint = ref('0,0')
const motionDir = ref('1,0')
const selPointMode = ref('st')
const pickDestMode = ref("pickPoint")

onMounted(() => {
    // window.mainctl.appendSelGraphListner(this);
})

var notifySelGraph = function (mousePoint,list) {
    console.log("piston act2PickGraphs --------------");
    console.log(selPointMode.value);
    window.mainctl.removeSelGraphListner(window.PistonMotionDlg.value);
    visible.value = true;
    
    if (pickDestMode.value == "pickPoint"){
        let sx = mousePoint.x.toFixed(4);
        let sy = mousePoint.y.toFixed(4);
        let coordDesc = sx + "," + sy;
        if (selPointMode.value == 'st'){
            stPoint.value = coordDesc;
        }
        else if (selPointMode.value == 'end'){
            endPoint.value = coordDesc;
        }
        else if (selPointMode.value == 'base'){
            basePoint.value = coordDesc;
        }
    }
    else if (pickDestMode.value == "pickGraph"){
        destList.value = list;
    }
}

const onSelPointOnMap = (mode) => {
    visible.value = false;
    selPointMode.value = mode;
    pickDestMode.value = "pickPoint";
    window.mainctl.setMapWorkMode(LGXEnums.LGXWorkMode.PickPointMode);
    window.mainctl.appendSelGraphListner(window.PistonMotionDlg.value);
}


const chgCoordDesc2Point = (cntDesc) => {
    let coordLst = cntDesc.split(",");
    if (coordLst.length != 2) {
        return null;
    }
    let xdesc = coordLst[0];
    let ydesc = coordLst[1];
    let x = parseFloat(xdesc);
    let y = parseFloat(ydesc);
    let pt = { x, y };
    return pt
}

const onConfirm = () => {
    console.log("rotate animate  confirm --------------");
    visible.value = false;
    let pistonSpeed = speed.value/100;
    let stPt = chgCoordDesc2Point(stPoint.value);
    let endPt = chgCoordDesc2Point(endPoint.value);
    let basePt = chgCoordDesc2Point(basePoint.value);
    let animateInfo = { obj: destList.value, speed:pistonSpeed ,stPt,endPt,basePt};
    window.mainctl.m_pAnimateINTF.setAnimate("piston", animateInfo);
}

const onSelPistonGraphs = () => {
    visible.value = false;
    pickDestMode.value = "pickGraph";
    window.mainctl.setMapWorkMode(LGXEnums.LGXWorkMode.ModifyMode);
    window.mainctl.appendSelGraphListner(window.PistonMotionDlg.value);
}

defineExpose({
    visible,
    onMounted,
    notifySelGraph
});

</script>
        